<template>
  <el-container class="h-100" v-loading="model.loading">
    <el-header class="shadow-sm d-flex justify-content-center bg-white" style="height: 80px;">
      <div class="w-100" style="line-height: 80px;">
        <h5 class="d-inline">图斑生命周期监管</h5>
        <div class="float-right">
          <el-input placeholder="请输入编号" style="width: 200px;" size="small" v-model="id"></el-input>
          <el-select v-model="cityId" placeholder="请选择市" style="width: 200px;" clearable size="small">
            <el-option v-for="(val, key) in city" :filterable="true" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
          <el-select v-model="areaId" placeholder="请选择区县" ref="area" clearable size="small">
            <el-option v-for="(val, key) in area" :filterable="true" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
          <el-select placeholder="请选择" v-model="dataType" class="my-2" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-search" size="small" @click="newSearch">搜索</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="p-2 m-2 bg-white">
      <el-table :data="model.rows">
        <el-table-column prop="date" label="序号" width="60" align="center" type="index">
        </el-table-column>
        <el-table-column label="图斑基础信息" align="center">
          <el-table-column prop="spotSampleId" label="图斑编号" align="center">
          </el-table-column>
          <el-table-column prop="cityName" label="地市" align="center">
          </el-table-column>
          <el-table-column prop="areaName" label="区县" align="center">
          </el-table-column>
          <el-table-column prop="area" label="图斑面积" align="center">
          </el-table-column>
          <el-table-column prop="preLandType" label="内业预判地类" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column label="外业举证" align="center">
          <el-table-column prop="quoteLandType" label="外业举证地类" align="center">
          </el-table-column>
          <el-table-column prop="quoteName" label="外业举证人员" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column label="审核过程" align="center">
          <el-table-column prop="areaAduitName" label="县级审核人" align="center"></el-table-column>
          <el-table-column label="县级审核" align="center">
            <template slot-scope="scope">
              <el-tag :type="getShowType(scope.row.areaStatus)[1]" v-show="getShowType(scope.row.areaStatus)[0]">
                {{getShowType(scope.row.areaStatus)[2]}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="cityAduitName" label="市级审核人" align="center"></el-table-column>
          <el-table-column label="市级审核" align="center">
            <template slot-scope="scope">
              <el-tag :type="getShowType(scope.row.cityStatus)[1]" v-show="getShowType(scope.row.cityStatus)[0]">
                {{getShowType(scope.row.cityStatus)[2]}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="provinceAduitName" label="省级审核人" align="center"></el-table-column>
          <el-table-column label="省级审核" align="center">
            <template slot-scope="scope">
              <el-tag :type="getShowType(scope.row.provinceStatus)[1]" v-show="getShowType(scope.row.provinceStatus)[0]">
                {{getShowType(scope.row.provinceStatus)[2]}}
              </el-tag>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="checkInfo(scope.row)">查看生命周期</el-button>
            <!-- <el-tooltip content="生命周期" placement="top">
              <i class="el-icon-document" style="font-size: 1.2rem;" @click="checkInfo(scope.row)"></i>
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="model.rows.length > 0" class="text-right py-3 pr-5 bg-white"
        @size-change="handleSizeChange" @current-change="val => this.model.pageLoad(val)"
        :current-page.sync="model.pageIndex" :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper"
        :total="model.count" :pager-count="7">
      </el-pagination>
    </el-main>
    <el-dialog title="生命周期详情" :visible.sync="dialogVisible" width="500px">
      <el-timeline>
        <el-timeline-item v-for="(life, index) in lifes" :key="index" :timestamp="$formatDateTime(life.time)">
          {{life.name || ''}} - {{ $getUserType(life.userType) || life.account }} &nbsp;&nbsp;&nbsp;
          {{life.description}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

  </el-container>
</template>
<script>
import PagedList from "@/libs/PagedList";
import pca from '@/libs/pca-code'

export default {
  name: "lifecycle",
  title: "图斑生命周期监管",
  data() {
    return {
      model: new PagedList("survey/sample/findDataByType", 20),
      id: '',
      cityId: '',
      areaId: '',
      dataType: '1',
      lifes: [],
      spotOrSample: '1',
      dialogVisible: false,
      options: [
        {
          value: "1",
          label: "初次举证"
        },
        {
          value: "2",
          label: "补充举证"
        },
        {
          value: "3",
          label: "地类样本"
        },
      ]
    };
  },
  mounted() {
    this.newSearch();
  },
  methods: {
    newSearch() {
      let obj = {
        spotId: this.dataType !== '3' ? this.id : '',
        sampleId: this.dataType === '3' ? this.id : '',
        cityId: this.cityId,
        areaId: this.areaId,
        dataType: this.dataType,
      }
      this.spotOrSample = this.dataType
      this.model.search(obj);
    },
    handleSizeChange(pageSize) {
      this.model.pageSize = pageSize;
      this.newSearch();
    },
    checkInfo(row) {
      let url = `survey/spotLogs/getLogs?areaId=${row.areaId}&spotId=${row.spotSampleId}`
      if (this.spotOrSample === '3') {
        url = `survey/sample/getSampleLandLogs?areaId=${row.areaId}&sampleId=${row.spotSampleId}`
      }
      this.$get(url).then(res => {
        this.lifes = res.data.data
        this.dialogVisible = true
      })
    },
    getShowType(status) {
      if (status === '2') {
        return [true, 'primary', '待审核']
      } else if (status === '3') {
        return [true, 'success', '通过']
      } else if (status === '4') {
        return [true, 'warning', '未通过']
      } else {
        return [false, '', '']
      }
    }
  },
  computed: {
    city() {
      return pca[610000]
    },
    area() {
      this.areaId = ''
      return this.cityId ? pca[this.cityId] : {}
    },
  }

};
</script>